<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>新增商品</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
</head>
<body>
<div id="app" class="container mt-4">
    <h2>新增商品</h2>
    <form method="post" action="/product/add" @submit.prevent="checkForm">
        <div class="form-group">
            <label>名称</label>
            <input type="text" class="form-control" v-model="product.name" required>
        </div>
        <div class="form-group">
            <label>价格</label>
            <input type="number" step="0.01" class="form-control" v-model="product.price" required>
        </div>
        <div class="form-group">
            <label>库存</label>
            <input type="number" class="form-control" v-model="product.stock" required>
        </div>
        <div class="form-group">
            <label>描述</label>
            <input type="text" class="form-control" v-model="product.description">
        </div>
        <button type="submit" class="btn btn-primary">保存</button>
        <a href="/product/list" class="btn btn-secondary ml-2">返回</a>
    </form>
    <div v-if="error" class="alert alert-danger mt-2">{{error}}</div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            product: {name: '', price: '', stock: '', description: ''},
            error: ''
        },
        methods: {
            checkForm: function() {
                if (!this.product.name) {
                    this.error = '名称不能为空';
                    return;
                }
                if (!this.product.price || this.product.price <= 0) {
                    this.error = '价格必须大于0';
                    return;
                }
                if (!this.product.stock || this.product.stock < 0) {
                    this.error = '库存不能为负数';
                    return;
                }
                this.$el.querySelector('form').submit();
            }
        }
    });
</script>
</body>
</html> 